<template>
  <div class="products">
    <!-- bounceInRight bounceInLeft -->
    <main class="animated ">
      <div class="cent">产品</div>
      <img src="../../public/image/testimonial-bg.jpg" alt="玫瑰" width="1519px" class="lbt" />
    </main>
    <div class="container animated ">
      <div class="box">
        <!-- 热点图 -->
        <div class="top">
          <div>
            <img src="../../public/picture/banner-1.jpg" alt="" width="875px" height="450px" />
          </div>
          <div class="produc-nav">
            <div class="nav-icon">
              <img src="../../public/image/bkg_grid_hover.png" alt="" width="20px" height="20px" />
              <img src="../../public/image/bkg_list_hover.png" alt="" width="20px" height="20px" />
            </div>
            <div class="pro-xl">
              <p>排序方式:</p>
              <select name="" id="" @change="px($event)">
                <option value="">精选</option>
                <option value="1">按价格低到高</option>
                <option value="2">按价格高到低</option>
              </select>
            </div>
            <p>显示10个结果中的1-9个</p>
          </div>
          <div class="pro-centent">
            <div class="pro-probox" v-for="item in pro" :key="item.id">
              <router-link to="/details" @click.native="shopcar(item.img,item.name,item.price)"><img :src="item.img"
                  alt="" width="276px" height="345px" /></router-link>
              <div class="pro-icon4 animated fadeInRight" v-show="istrue">
                <div><i class="iconfont icon-shangpindaizi icon4"></i>
                  <!--@click="scar(item.img,item.name,item.price)"-->
                </div>
                <div><i class="iconfont icon-iconbijiao icon4"></i></div>
                <div><i class="iconfont icon-xinaixin icon4"></i></div>
                <div><i class="iconfont icon-yanjing icon4" data-toggle="modal" data-target="#exampleModal"
                    @click="sop(item.img,item.name,item.price,item.id)"></i></div>
              </div>
              <div class="pro-mgl">
                <p>
                  <i class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i><i
                    class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i>
                  <i class="iconfont icon-xing icon-ora"></i>
                </p>
                <span></span>
                <p>{{item.name}}</p>
                <p class="price">
                  {{'￥'+item.price}} <span class="delect">{{ item.delect }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="product-right">
          <div class="pro-lb">
            <h3>自定义类别</h3>
            <a href="javascript:void(0)" v-for="(item, index) in prolb" :key="index">{{ item.name }}</a>
          </div>
          <div class="pro-ml">
            <h3>分类目录</h3>
            <a href="javascript:void(0)" v-for="(item, index) in proml" :key="index"><span> {{ item.name }}</span>
              <span>{{ item.coount }}</span>
            </a>
          </div>
          <div class="color-6">
            <h3>颜色</h3>
            <ul>
              <li><span class="red"></span>红色</li>
              <li><span class="green"></span>绿色</li>
              <li><span class="blue"></span>蓝色</li>
              <li><span class="yellow"></span>黄色</li>
              <li><span class="white"></span>白色</li>
              <li><span class="golden"></span>金色</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 模态框 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div>
              <img :src="mtkimg" alt="" width="437px" height="546px" :title="sopid">
            </div>
            <div>
              <div class="shopping-left">
                <h3>{{sopName}}</h3>
                <div class="sop-price">
                  <span class="price">{{'￥'+sopPrice}}</span>
                  <span class="del">$29.00</span>
                  <span class="yl">-34%</span>
                </div>
                <p class="color-666">
                  <i class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i><i
                    class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i>
                  <i class="iconfont icon-xing icon-ora"></i>
                  无评论
                </p>
              </div>
              <p>
                紫色玫瑰代表成熟的爱，当你的男友向你奉上紫色玫瑰，就表示他想与你共同演绎与童话似的故事--
                王子和公主历尽磨难终于喜结良缘；紫色玫瑰代表你的幸福比我的重要，如果有个男人要送你紫色玫瑰的时候你不要拒绝，
                因为那个人是可以陪你一生的人。
              </p>
              <div class="scn">
                <div class="num">
                  <div class="tj">
                    <button @click="jian">-</button>
                    <input type="text" v-model.number="num" value="1" oninput="value=value.replace(/[^\d]|^[0]/g,'')">
                    <button @click="add">+</button>
                  </div>
                  <!-- <router-link to='/shop'> -->
                  <button class="addto" @click="scar(mtkimg,sopName,sopPrice,num,sopid)" data-dismiss="modal">
                    添加到购物车
                  </button>
                  <!-- </router-link> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  ul,
  li {
    list-style: none;
  }

  input,
  button {
    border: none;
    outline: none;
  }

  main {
    position: relative;

    .cent {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #222222;
      font-size: 42px;
      font-family: "Lora", serif;
    }
  }

  .icon-ora {
    color: #FF9800;
    font-size: 13px;
    margin: 0 2px;
  }


  .container {
    padding: 50px 0 100px 0;
    min-height: 2147px;

    .box {
      width: 1180px;
      height: 2147px;
      padding-right: 0 12px;
      margin: 0 auto;
      display: flex;

      .top {
        width: 900px;
        height: 2147px;
        margin-top: 50px;

        .produc-nav {
          width: 876px;
          height: 64px;
          color: #666666;
          margin: 50px 0 0;
          padding: 0 15px 10px;
          border: 1px solid #e5e5e5;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .nav-icon {
            width: 60px;
            height: 20px;
            display: flex;
            justify-content: space-between;
          }

          .pro-xl {
            width: 234px;
            height: 42px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            select {
              width: 124px;
              outline: none;
              border: 1px solid #e5e5e5;
              padding: 8px 10px;
              height: 42px;
              font-size: 14px;
              font-weight: 400;
              color: #222222;
              padding-right: 35px;
            }
          }

          p {
            color: #666666;
            font-size: 14px;
          }
        }

        .pro-centent {
          width: 900px;
          height: 1431px;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          align-items: center;

          .pro-probox {
            width: 300px;
            height: 477px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            position: relative;

            &:hover .pro-icon4 {
              display: block;
            }

            &:hover {
              z-index: 2;
              box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
              transform: translate3d(0, -2px, 0);
              border: 1px solid rgba(102, 102, 102, 0);
            }

            .pro-icon4 {
              display: none;
              width: 45px;
              height: 204px;
              position: absolute;
              top: 10px;
              right: 30px;

              div {
                background-color: white;
                width: 45px;
                height: 45px;
                margin-bottom: 6px;
                border-radius: 50%;
                text-align: center;
                line-height: 46px;

                .icon4 {
                  font-size: 18px;

                  &:hover {
                    color: #f34f3f;
                  }
                }
              }
            }

            .pro-mgl {
              width: 100%;
              display: flex;
              flex-wrap: wrap;
              align-content: center;
              justify-content: center;
              text-align: center;

              p {
                width: 100%;
              }

              .icon-ora {
                color: #FF9800;
              }

              .price {
                font-weight: 500;
                font-size: 15px;
                color: #f34f3f;

                .delect {
                  text-decoration: line-through;
                  font-weight: 400;
                  font-size: 12px;
                  margin-left: 5px;
                  color: #666666;
                }
              }
            }
          }
        }
      }

      .product-right {
        padding-top: 20px;
        width: 276px;
        height: 1620px;
        margin-top: 10px;

        h3 {
          width: 100%;
          margin-top: 20px;
          margin-bottom: 20px;
          padding-bottom: 10px;
          font-size: 15px;
          font-weight: 500;
          line-height: 20px;
          border-bottom: 1px solid #e1e1e1;
        }

        a {
          width: 100%;
          font-size: 14px;
          color: #666666;
          transition: all 0.3s linear;
          margin-top: 10px;

          &:hover {
            color: #f34f3f;
          }
        }

        .pro-lb {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
        }

        .pro-ml {
          a {
            display: flex;
            justify-content: space-between;
          }
        }

        .color-6 {
          ul {
            width: 100%;
            height: 100%;

            li {
              width: 25%;
              float: left;

              // flex-wrap: wrap;
              // justify-content: space-between;
              span {
                width: 14px;
                height: 14px;
                display: inline-block;
                border: 1px solid #e5e5e5;
                margin-right: 3px;
              }

              .red {
                background-color: red;
              }

              .green {
                background-color: green;
              }

              .blue {
                background-color: blue;
              }

              .yellow {
                background-color: yellow;
              }

              .white {
                background-color: red;
              }

              .golden {
                background-color: golden;
              }
            }
          }
        }
      }
    }
  }
</style>
<script>
  import shop from '@/shop.js'
  export default {
    data() {
      return {
        num: 1,
        istrue: true,
        mtkimg: null, //模态框的图片
        sopName: null, //模态框的吗，名字 
        sopPrice: null, //模态框的价格
        sopid: null, //模态框的价格
        scarimg: '',
        scarname: '',
        scarprice: '',
        pro: [{
            id: 1,
            img: "picture/product-1.jpg",
            name: "春天雪花",
            price: "19",
            delect: "$29",
          },
          {
            id: 2,
            img: "picture/product-2.jpg",
            name: "岩皂",
            price: "50",
            delect: "",
          },
          {
            id: 3,
            img: "picture/product-3.jpg",
            name: "猩红圣人",
            price: "39",
            delect: "$60",
          },
          {
            id: 4,
            img: "picture/product-4.jpg",
            name: "毛地黄花",
            price: "79",
            delect: "",
          },
          {
            id: 5,
            img: "picture/product-5.jpg",
            name: "夏日美味",
            price: "40",
            delect: "$85",
          },
          {
            id: 6,
            img: "picture/product-7.jpg",
            name: "野玫瑰",
            price: "19",
            delect: "$21",
          },
          {
            id: 7,
            img: "picture/product-8.jpg",
            name: "甜香雪球",
            price: "50",
            delect: "",
          },
          {
            id: 8,
            img: "picture/product-9.jpg",
            name: "Ity下棕榈",
            price: "19",
            delect: "$29",
          },
          {
            id: 9,
            img: "picture/product-6.jpg",
            name: "棕榈皇后",
            price: "19",
            delect: "$29",
          },
        ],
        prolb: [{
            name: "交货"
          },
          {
            name: "法律声明"
          },
          {
            name: "安全付款"
          },
          {
            name: "网络地图"
          },
          {
            name: "关于我们"
          },
        ],
        proml: [{
            name: "最畅销",
            coount: "(8)"
          },
          {
            name: "精选",
            coount: "(9)"
          },
          {
            name: "新",
            coount: "(8)"
          },
        ],
      };
    },
    methods: {
      // 模态框
      sop(img, name, price, id) {
        this.mtkimg = img;
        this.sopName = name;
        this.sopPrice = price;
        this.sopid = id;
      },
      // 商品详情
      shopcar(img, name, price) {
        setTimeout(() => {
          shop.$emit('shopcar', {
            img,
            name,
            price
          })
        }, 60);

      },
      //排序
      px(evevt) {
        if (event.target.value == '1') {
          console.log(1);
          this.pro.sort(this.sortdg('price'))
        } else if (event.target.value == '2') {
          this.pro.sort(this.sortgd('price'))
          console.log(2);
        }
      },
      // 升序
      sortdg(price) {
        console.log(1);
        return function (a, b) {
          let val1 = a[price];
          let val2 = b[price];
          return val1 - val2;
        }
      },
      //降序
      sortgd(price) {
        console.log(2);
        return function (a, b) {
          let val1 = a[price];
          let val2 = b[price];
          return val2 - val1;
        }
      },
      // 计算
      add() {
        this.num++;
      },
      jian() {
        if (this.num == 0) {
          this.num = 0
        } else {
          this.num--;
        }

      },
      //加入购物车
      scar(img, name, price, num, id) {
        console.log(img, name, price, num, id)
        var shopcar = {
          id: id,
          img: img,
          name: name,
          price: price,
          num: num
        };
        this.num = 1;
        this.$store.commit('add', shopcar);
      }
    },
    mounted() {
      window.scrollTo(0, 0);
    },
  };
</script>